<template>
  <div class="type_c">
    <div class="time">
      <div class="small-title">上课时间</div>
      <div>
        <el-time-picker
        format="HH:mm"
        value-format="HH:mm" 
        v-model="classTime"
        is-range
        :clearable="false"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间" />
      </div>
    </div>
    <div class="calendar">
      <div class="small-title">上课日期</div>
      <div class="calendar-body">
        <el-calendar ref="calendar" >
          <template #date-cell="{ data }" >
            <div class="selected" :class="data.isSelected ? 'is-selected' : ''"  
            @click="clickCalendar(data.day)">
              {{ data.day.split('-').slice(2).join('-') }}
              <div class="day">{{ handData(data.day) ? '✔️' : '' }}</div>
            </div>
          </template>
        </el-calendar>
      </div>
      <div class="calendar-list">
        <div class="num">
          <div>班级课次<span>{{ classNum }}</span>次</div>
          <div>已选课次<span>{{ checkCalendarList.length+1 }}</span>次</div>
        </div>
        <div class="list">
          <div class="item" v-for="(item, index) in checkCalendarList" :key="index">
            <span>{{ item.date }}</span>
            <el-checkbox v-model="item.isLiveClass" label="设置为直播课" size="large" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const classTime = ref(["09:30", "10:30"])
const classNum = ref(44)
const checkCalendarList = ref([])
const calendar = ref(null)

function handData(day) {
  const list = checkCalendarList.value.map(m => m.date)
  const isHead = list.indexOf(day)
  if (isHead !== -1) {
    return true
  }else{
    return false
  }
}

function clickCalendar(day) {
  const list = checkCalendarList.value.map(m => m.date)
  const isHead = list.indexOf(day)
  if (isHead == -1) {
    checkCalendarList.value.push({date: day, isLiveClass: false})
  }else{
    checkCalendarList.value.splice(isHead, 1)
  }
}
</script>

<style lang="scss" scoped>
.type_c {
  padding-left: 72px;
  .is-selected {
    color: #1989fa;
    .day {
      color: #1989fa;
    }
  }
  .selected {
    height: 100%;
  }

  .small-title {
    padding-right: 15px;
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
    text-align-last: justify;
    min-width: 72px;
  }

  .time, .calendar {
    display: flex;
  }

  .calendar {
    padding: 15px 0;
    .calendar-body {
      width: 700px
    }
  }

  .calendar-list {
    width: 250px;
    margin-left: 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      border-bottom: 1px solid #ddd;
      &>div {
        padding: 0 7px;
        span {
          color: #27b2fb;
        }
      }
    }
    .list {
      max-height: 520px;
      overflow-y: auto;
      padding-left: 15px;
      .item {
        &>span {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>